<template>
  <view class="supplier-container">

    <!-- 公司列表 -->
    <view class="supplier-list">
      <view v-for="(item, index) in supplierList"
            :key="index"
            class="supplier-card">
        <view class="supplier-info">
          <view class="supplier-name">{{ item.name }}</view>
          <view class="supplier-contact">
            <text class="label">联系人:</text>
            <text class="value">{{ item.contact }}</text>
          </view>
          <view class="supplier-phone">
            <text class="label">电话:</text>
            <text class="value">{{ item.phone }}</text>
          </view>
          <view class="supplier-address">
            <text class="label">地址:</text>
            <text class="value">{{ item.address }}</text>
          </view>
        </view>
        <view class="supplier-actions">
          <button class="action-btn edit" @click="handleEdit(item)">
            <uni-icons type="compose" size="16" color="#1890ff"/>
            <text>编辑</text>
          </button>
          <button class="action-btn delete" @click="handleDelete(item)">
            <uni-icons type="trash" size="16" color="#ff4d4f"/>
            <text>删除</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="supplierList.length === 0" class="empty-state">
      <uni-icons type="shop" size="64" color="#999"/>
      <text class="empty-text">暂无公司数据</text>
    </view>
        <!-- 底部按钮 -->
        <view class="footer">
      <button class="submit-btn" @click="handleAddSupplier">添加公司</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { supplierApi } from '@/api/supplier'

// 公司列表数据
const supplierList = ref([])

// 获取公司列表
const getSupplierList = async () => {
  try {
    const res = await supplierApi.getList({page: 1, size: 10})
    supplierList.value = res.list || []
  } catch (error) {
    console.error('获取公司列表失败:', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'error'
    })
  }
}

// 添加公司
const handleAddSupplier = () => {
  uni.navigateTo({
    url: '/pages/settings/supplier/add'
  })
}

// 编辑公司
const handleEdit = (item) => {
  uni.navigateTo({
    url: `/pages/settings/supplier/add?id=${item.id}`
  })
}

// 删除公司
const handleDelete = (item) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该公司吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await supplierApi.delete(item.id)
          await getSupplierList() // 重新获取列表
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
        } catch (error) {
          uni.showToast({
            title: '删除失败',
            icon: 'error'
          })
        }
      }
    }
  })
}

// 监听新增公司事件
const handleSupplierAdded = () => {
  getSupplierList() // 刷新列表
}

onShow(() => {
  getSupplierList()
  uni.$on('supplierAdded', handleSupplierAdded)
})

onUnmounted(() => {
  uni.$off('supplierAdded', handleSupplierAdded)
})
</script>

<style>
.supplier-container {
  min-height: 100vh;
  background-color: #F0F2F5;
  padding-top: var(--status-bar-height);
}

/* 头部样式 */
.header {
  padding: 24px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background-color: #1890ff;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
}

/* 公司列表 */
.supplier-list {
  padding: 16px;
}

.supplier-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.supplier-info {
  margin-bottom: 16px;
}

.supplier-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
}

.supplier-contact,
.supplier-phone,
.supplier-address {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

.label {
  color: #666;
  width: 60px;
}

.value {
  color: #333;
  flex: 1;
}

/* 操作按钮 */
.supplier-actions {
  display: flex;
  gap: 12px;
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  font-size: 14px;
  background-color: #fff;
}

.action-btn.edit {
  border: 1px solid #1890ff;
  color: #1890ff;
}

.action-btn.delete {
  border: 1px solid #ff4d4f;
  color: #ff4d4f;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
}

.empty-text {
  color: #999;
  font-size: 14px;
}

/* 底部按钮 */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.submit-btn {
  width: 100%;
  height: 44px;
  background-color: #1890ff;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  border: none;
}

.submit-btn:active {
  background-color: #096dd9;
}
</style> 